<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../../vue.js"></script>
    <title>Document</title>
</head>
<style>
    .color {
        color: blueviolet;
    }

    .thiscolor {
        color: tomato;
    }

    .width1 {
        width: 20px;
        height: 20px;
        background-color: yellow;
    }
</style>

<body>
    <!-- 
        绑定样式:
            1.class样式
                写法:class='xxx' xxx可以是字符串.对象.数组.
                    字符串写法适应于:类名不确定,要动态获取.
                    对象写法适应于:要绑定多个样式.个数不确定,名字也不确定
                    数组写法适应于:要绑定多个样式,个数确定,名字也确定,但不确定用不用
            2.style样式
                :style="{fontSize:xxx}" 其中xxx是动态值
                :style="[a,b]" 其中a.b是样式对象
     -->
    <div class="app">
        <ul>
            <!-- 绑定class样式--字符串写法 适应于: 类名不确定,需要动态指定-->
            <li class="color" :class="thiscolor" @click="change">1</li> <br>

            <!-- 绑定class样式--数组写法  适应于:要绑定的样式不确定,名字也不确定 -->
            <li class="color" :class="arr">2</li>
            <button @click="arrbtn">点击切换2</button> <br>

            <!-- 绑定class样式--对象写法  适应于:要绑定的样式确定,名字也确定 但要动态决定用不用 -->
            <li class="color" :class="classObj">3</li>
            <button @click="changeClass">点击切换类名</button><br>

            <!-- 绑定style样式 --对象写法 -->
            <h2 class="color" :style="styleObj">更改字体大小</h2>

            <!-- 绑定style样式 --数组写法 -->
            <h3 class="color" :style="styleArr">数组绑定style样式</h3>
        </ul>
    </div>
</body>
<script>
    const vm = new Vue({
        data: {
            thiscolor: 'thiscolor',
            arr: ['thiscolor', 'width1'],
            classObj: {
                thiscolor: false,
                width1: true        //对象中的键值,不能乱写,必须写已有的类名
            },
            styleObj: {
                fontSize: '40px'
            },
            styleArr: {

            }
        },
    methods: {
        change() {
            const arr = ['thiscolor', 'width1']
            this.thiscolor = arr[Math.floor(Math.random() * 3)]
        },
        arrbtn() {
            const arr = ['thiscolor', 'width1']
            this.arr = arr[Math.floor(Math.random() * 3)]
        },
        changeClass() {
            this.classObj.width1 = !this.classObj.width1
        }
    }
    }).$mount('.app')
</script>

</html>